<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../iconfont/iconfont.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/mine.css">
</head>

<body>
  <div id="app3">
    <!-- 头部 -->
    <header id="header">
      <i class="iconfont icon-icon-test16"></i>
      <p>我的</p>
      <i class="iconfont icon-RectangleCopy71"></i>
    </header>
    <!-- 个人信息板块 -->
    <div id="myinfor">
      <div>
        <section>
          <img :src="myinfor.src" alt="">
        </section>
        <p>
          {{myinfor.name}}
          <br>
          {{myinfor.adr}}
        </p>
      </div>
      <button>立即签到</button>
    </div>
    <!-- 导航 -->
    <div id="nav">
      <section v-for="item in nav">
        <img :src="item.src" alt="">
        {{item.title}}
      </section>
    </div>
    <!-- 我的订单 -->
    <div id="mydingdan">
      <p>我的订单</p>
      <div class="mydingdan_nav">
        <section>
          <img src="../images/我的-03-待付款.png" alt="">待付款
        </section>
        <section>
          <img src="../images/我的-03-进行中.png" alt="">进行中
        </section>
        <section>
          <img src="../images/我的-03-已完成.png" alt="">已完成
        </section>
        <section>
          <img src="../images/我的-03-全部订单.png" alt="">全部订单
        </section>
      </div>
    </div>
    <!--福利社等 -->
    <ul id="term">
      <li>福利社<button>></button></li>
      <li>购物袋<button>></button></li>
      <li>我的地址<button>></button></li>
      <li>我的开封<button>></button></li>
      <li>意见反馈<button>></button></li>
    </ul>
    <footer id="bottom_nav">
      <section v-for="item,index in footerBtn" :class="index===footerBtnSelected?'on':''"
        @click="footerBtnSelected=index">
        <i class="iconfont" :class="item.icon"></i>{{item.title}}
      </section>
    </footer>
  </div>

  <script src="../js/flexible.js"></script>
  <script src="../lib/vue2.js"></script>
  <script>
    var app3 = new Vue({
      el: "#app3",
      data() {
        return {
          myinfor: {
            name: "木言木言木言",
            src: "../images/我的-01-头像.png",
            adr: "河南郑州"
          },
          nav: [
            {
              title: "我的收藏",
              src: "../images/我的-02-我的收藏.png"
            },
            {
              title: "我的关注",
              src: "../images/我的-02-我的关注.png"
            },
            {
              title: "粉丝",
              src: "../images/我的-02-粉丝.png"
            },
            {
              title: "我的帖子",
              src: "../images/我的-02-我的帖子.png"
            },
            {
              title: "消息",
              src: "../images/我的-02-消息.png"
            },
            {
              title: "心得",
              src: "../images/我的-02-心得.png"
            },
          ],
          footerBtnSelected: 3,
          footerBtn: [
            {
              title: "首页",
              icon: "icon-shouye"
            },
            {
              title: "选品",
              icon: "icon-icon-test47"
            },
            {
              title: "购物袋",
              icon: "icon-gouwuche"
            },
            {
              title: "我的",
              icon: "iconfont icon-me"
            }
          ]

        }
      },
      methods: {

      },
      computed: {

      },
      components: {

      }
    })
  </script>
</body>

</html>